<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   //JS 问题如何解决? console.log(),debugger,排除法
   $(()=>{
	  // $("#pageId").load("doPageUI",function () {
	//	   doGetObjects();
	  // });
	   $("#pageId").load("doPageUI",doGetObjects);
	   //查询按钮事件注册
	   $(".input-group-btn").on("click",".btn-search",doQueryObjects);
	   $(".input-group-btn").on("click",".btn-delete",doDeleteObject);
	   //thead中全选checkbox的change事件注册及处理
	   $("#checkAll").change(doChangeTbodyCheckboxState);
	   //
	   //$(".cBox").change(doChangeTheadCheckboxState);//有问题（页面加载完成cBox元素还不存在）
	   $("#tbodyId").on("change",".cBox",doChangeTheadCheckboxState)
   });
   function doChangeTheadCheckboxState() {
   	debugger;
		//alert("=======")
	   //1，对tbody中checkbox对象的checked属性值进行逻辑与
	   let flag=true;
	   $("#tbodyId input:checkbox").each(function () {
			flag=flag&&$(this).prop("checked")
	   })
	   //
	   $("#checkAll").prop("checked",flag);
   }
   //
   function doChangeTbodyCheckboxState() {
		//1，获取全选checkbox对象
	    let flag=$(this).prop("checked");
	   //2,修改tbody中checkbox对象状态
	   $("#tbodyId input:checkbox")//获取tbody中类型为checkbox的input元素
			   .prop("checked",flag)//让类型为checkbox的input元素中checked属性的值为flag
   }
	function doGetCheckedIds() {
   		debugger;
		//1，定义一个用于储存id值的数组
		let idArray=[];
		//2将选中记录的checkbox的value属性值存储到数组
		$("#tbodyId input:checkbox:checked").each(function () {
			idArray.push($(this).val());//$(this)指向的是input对象，val（）表示获取value属性的值
		})
		//返回数组
		return idArray;
	}

   //删除事件处理函数
	function doDeleteObject() {
   	debugger;
		//获取选中的日志记录id并校验
		let idArrays=doGetCheckedIds();
		//给出删除提示（你确定删除吗）
		if (!confirm("你确定删除吗"))return;
		//发送异步请求执行删除操作
		const url="log/doDeleteObjects"
		let params={"ids":idArrays.toString()}
		$.post(url,params,function (result) {
			if (result.state==1){
				alert(result.message);
				//doGetObjects();//重新执行查询进行刷新
				doRefreshAfterDeleteOk();
			}else {
				alert(result.message);
			}
		})
	}

	function doRefreshAfterDeleteOk() {
		//1,获取当前页码值，总页数，全选状态
		let pageCurrent=$("#pageId").data("pageCurrent");
		let pageCount=$("#pageId").data("pageCount");
		let state=$("#checkAll").prop("checked");
		if (state&&pageCurrent>1&&pageCurrent==pageCount){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		doGetObjects();
	}

   function doQueryObjects() {
   		//初始化页面值
   		$("pageId").data("pageCourrent",1);
   		//执行查询操作
	   doGetObjects();
   }
   //
	function doGetObjects() {
   		$("#checkAll").prop("checked",false);
		//1,request url
		const url="log/doFindPageObjects";
		//2,request params
		let pageCurrent=$("#pageId").data("pageCurrent");
		if (!pageCurrent)pageCurrent=1;
		let username=$("#searchNameId").val();//获取页面上输入的用户名
		let params={"pageCurrent":pageCurrent,"username":username};
		//3，send ajax get request
		$.getJSON(url,params, doHandleQueryResponseResult)
	}
	//处理日志查询结果
	function doHandleQueryResponseResult(result) {
		console.log("server.jsonresult",result)
		if (result.state==1){//
			//1,tbody位置呈现当前页的日志记录信息
			doSetTableBodyRows(result.data.records);
			//2,pageId位置呈现日志分析信息（总记录数，总页数，当前页码值）
			doSetPagination(result.data);
		}else{
			//1,方法1：alert 错误新信息
			//alert(result.message);
			//2,方法2：tbody位置插入错误信息
			//$("#tbodyId").empty();
			//$("#tbodyId").append(result.message);
			doSetTableBodyErrors(result.message);
		}
	}
	function doSetTableBodyErrors(msg) {
		$("#tbodyId").html(`<tr><td colspan="7">${msg}</td></tr>`);
		var page={rowCount:0,pageCurrent:1,pageCount:0}
		doSetPagination(page);
	}
   function doSetTableBodyRows(records) {
	   //1.获取tbody对象，并清空对象
	   let tBody=$("#tbodyId");
	   tBody.empty();
	   //2.迭代records记录，并将其内容追加到tbody
	   records.forEach((item)=>{
		   tBody.append(doCreateRow(item));
	   })
   }
   function doCreateRow(item) {
		return `<tr><td><input type="checkbox" class="cBox" value=${item.id}>
				</td><td>${item.username}</td>
				<td>${item.operation}</td>
				<td>${item.method}</td>
				<td>${item.params}</td>
				<td>${item.ip}</td>0
				<td>${item.time}</td>
				</tr>`;
   }
</script>






